
<template>
  <div class="userinfo">
    <!-- 头部 -->
    <div class="userinfo-header">
      <div class="header-content">
        <p>
          <i class="el-icon-s-order"></i>
        </p>
        <p>个人信息</p>
      </div>
    </div>
    <!-- 头部END -->

    <!-- 主要内容容器 -->
    <div class="content">
      <div class="info">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="我的名称" prop="name" >
            <el-col :span="11">
              <el-input v-model="ruleForm.name"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="真实姓名" prop="userRealName" >
            <el-col :span="11">
              <el-input v-model="ruleForm.userRealName"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="用户住址" prop="userAddress" >
            <el-col :span="11">
              <el-input v-model="ruleForm.userAddress"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="登录密码" prop="userPasswd" >
            <el-col :span="8">
              <el-input v-model="ruleForm.userPasswd" type="password"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="支付密码" prop="userPaypass" >
            <el-col :span="8">
              <el-input v-model="ruleForm.userPaypass" type="password"></el-input>
            </el-col>
          </el-form-item>
           <el-form-item label="我的电话" prop="userPhone" >
            <el-col :span="11">
              <el-input v-model.number="ruleForm.userPhone" ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="性别" prop="userSex">
            <el-select v-model="ruleForm.userSex" placeholder="请选择性别">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出生日期" required>
            <el-col :span="11">
              <el-form-item prop="userBrith">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="ruleForm.userBrith"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="我的邮箱" prop="userEmail" >
            <el-col :span="11">
              <el-input v-model="ruleForm.userEmail"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="收货地址" prop="currcomm">
            <el-radio-group v-model="ruleForm.userComm"  size="medium">
              <el-radio style="margin-bottom: 20px" v-for="item in this.ruleForm.currcomm" :key="item.id" :label="item.id" border>{{item.commCity + item.commProvince + item.commCity + item.commCounty +item.commAddress}}</el-radio>
              <el-button type="primary" icon="el-icon-edit" @click="centerDialogVisible = true">添加新收货地址</el-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="submitForm('ruleForm')" style="width:200px;margin-left:8px;"
              >修改</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <el-dialog
        title="添加新地址"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>
        <div class="block">
          <span  class="demonstration">国家/省份/城市/地区：</span>
          <el-cascader
            :options="addressData"
            v-model="selectedAddress"
            @change="handleChange"
            :separator="' '"
            style="margin-bottom:20px"
          >
          </el-cascader>
        </div>
        <div class="block">
          <span style="margin-bottom:20px" class="demonstration">详细地址：</span>
          <el-input style="width:70%" size="medium" v-model="newDetailaddress"  placeholder="请输入内容"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addnewAddress">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 主要内容容器END -->
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { mapActions } from "vuex";
import { userMessage, addCurrComm, userModify } from "../api/index";
import options from '../api/country-data'
export default {
  name: "",
  data() {
    return {
      newDetailaddress:"",
      newaddress:{},
      centerDialogVisible: false,
      usermesg:{},
      ruleForm: {
        name: "",
        userRealName:"",
        userPasswd:"",
        userPaypass:"",
        userPhone:"",
        userSex: "",
        userBrith: "",
        userEmail:"",
        currcomm: [],
        userComm:"",
        userAddress:"",
        id:"",
      },
      rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { required: true, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          userRealName: [
            { required: true, message: '请填写真实姓名', trigger: 'change' }
          ],
          userBrith: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          currcomm: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
      },
      selectedAddress: [],//存放默认值
      addressData:options   //存放城市数据
    };
  },
  created() {
    this.getaddress();
  },
  computed: {},
  methods: {
    getaddress() {
      let params = JSON.parse(localStorage.getItem("user"));
      userMessage({
        userId: params.userId,
        userName: params.userName,
      })
        .then((res) => {
          this.usermesg = res.data
          this.ruleForm.id = this.usermesg.salenetUser.id
          this.ruleForm.name = this.usermesg.salenetUser.userName
          this.ruleForm.userRealName = this.usermesg.salenetUser.userRealName
          this.ruleForm.userPasswd = this.usermesg.salenetUser.userPasswd
          this.ruleForm.userPaypass = this.usermesg.salenetUser.userPaypass
          this.ruleForm.userPhone = this.usermesg.salenetUser.userPhone
          this.ruleForm.userSex = this.usermesg.salenetUser.userSex
          this.ruleForm.userBrith = new Date(this.usermesg.salenetUser.userBrith).getTime()
          this.ruleForm.userEmail = this.usermesg.salenetUser.userEmail
          this.ruleForm.currcomm = this.usermesg.commList
          this.ruleForm.userComm = this.usermesg.currComm.id
          this.ruleForm.userAddress = this.usermesg.salenetUser.userAddress
          // console.log( this.ruleForm.defalutCurrcomm )
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    },
    // 提交修改信息
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          delete this.ruleForm.currcomm
          console.log(this.ruleForm)
          userModify({...this.ruleForm}).then((res) =>{
            this.notifySucceed(res.message);
            this.getaddress()
          }).catch((err) =>{
            return Promise.reject(err)
          })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleChange(value) {
      this.newaddress = value
    },
    // 添加收货地址
    addnewAddress(){
      this.centerDialogVisible = false
      let userinfo = JSON.parse(localStorage.getItem("user"));
      let params = {
        commUserId:userinfo.userId,
        commProvince:this.newaddress[1],
        commCity:this.newaddress[2],
        commCounty:this.newaddress[3],
        commAddress:this.newDetailaddress,
        commUsername:userinfo.userName,
        commPhone:this.usermesg.salenetUser.userPhone,
        commVillage:""
      }
      console.log(params)
      addCurrComm({
        ...params
      }).then((res) =>{
        this.newaddress = ""
        this.newDetailaddress = ""
        this.ruleForm.currcomm.push(params)
      }).catch((err) =>{
        return Promise.reject(err)
      })
    }
    
  },
};
</script>
<style scoped>
.userinfo {
  background-color: #f5f5f5;
  padding-bottom: 20px;
}
/* 头部CSS */
.userinfo .userinfo-header {
  background-color: #fff;
  border-bottom: 2px solid #ff6700;
  margin-bottom: 20px;
}
.userinfo .userinfo-header .header-content {
  width: 1225px;
  margin: 0 auto;
  height: 80px;
}
.userinfo .userinfo-header .header-content p {
  float: left;
  font-size: 28px;
  line-height: 80px;
  color: #424242;
  margin-right: 20px;
}
.userinfo .userinfo-header .header-content p i {
  font-size: 45px;
  color: #ff6700;
  line-height: 80px;
}
/* 头部CSS END */

/* 主要内容容器CSS */
.userinfo .content {
  width: 1225px;
  margin: 0 auto;
  padding: 48px 0 0;
  background-color: #fff;
}

.userinfo .info {
  width: 70%;
  margin: 0 auto;
  padding-bottom: 10px;
}

/* 主要内容容器CSS END */
</style>